<template>
    <div class="home-config">
        <div class="list-box" style="width:100%;">
            <div class="pannel-title pannel-between">
                <div>首页Banner配置</div>
                <a-button class="pannel-btn" size="small" type="primary" shape="round" @click="addToolType()">
                    <PlusCircleFilled />
                    新增Banner
                </a-button>
            </div>
            <div class="line"></div>
            <div class="data-table">
                <a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource" :pagination="pagination" :loading="isLoading" @change="handleTableChange">
                    <template #logo="{text}">
                        <img :src="text" style="width:240px;height:50px;border-radius:4px;" />
                    </template>
                    <template #status="{ text }">
                        <span class="span-green" v-if="text === 'Enabled'">启用</span>
                        <span class="span-red" v-if="text === 'Disabled'">禁用</span>
                    </template>
                    <template #action="{record}">
                        <a @click="editToolType(record)" title="编辑" style="margin-right:5px;"><img src="@/assets/images/cz-edit.png"/></a>
                        <a @click="deleteToolType(record)" title="删除" style="margin-right:5px;"><img src="@/assets/images/cz-delete.png"/></a>
                        <a-tag @click="Active(record)" style="padding:1px 7px;border-radius:3px;cursor:pointer;" v-if="record.status === 'Disabled'" color="#87d068">启用</a-tag>
                        <a-tag @click="Freeze(record)" style="padding:1px 7px;border-radius:3px;cursor:pointer;" v-else color="#f50">禁用</a-tag>
                    </template>
                </a-table>
                <a-modal width="700px" v-model:visible="visible" :maskClosable="false" :afterClose="closeModal">
                    <h3 class="modal-title">{{ formState.id ? "修改Banner" : "新增Banner" }}</h3>
                    <div class="modal-form">
                        <a-form ref="form1" :model="formState" :rules="rules" :labelCol="{ span: 5, offset: 0 }">
                            <a-form-item label="Banner" name="logo">
                                <avatar-upload width="480px" height="100px" v-model:value="formState.logo"></avatar-upload>
                            </a-form-item>
                            <a-form-item label="Banner链接" name="url">
                                <a-input v-model:value="formState.url" placeholder="请输入Banner链接" />
                            </a-form-item>
                            <a-form-item label="排序位置" name="displayPriority">
                                <a-input v-model:value="formState.displayPriority" placeholder="请输入大于等于0的正整数">
                                    <template #suffix>
                                        <a-tooltip title="排序序号数值越小越靠前">
                                            <info-circle-outlined style="color: rgba(255, 0, 0, 0.7)" />
                                        </a-tooltip>
                                    </template>
                                </a-input>
                            </a-form-item>
                        </a-form>
                    </div>
                    <template #footer>
                        <div class="modal-btn">
                            <a-button type="default" shape="round" @click="closeModal()">取消</a-button>
                            <a-button :loading="btnLoading" type="primary" shape="round" @click="confirm()">确定</a-button>
                        </div>
                    </template>
                </a-modal>
            </div>
        </div>
        <!-- <div class="list-box">
            <div class="pannel-title pannel-between">
                <div>首页文章配置</div>
            </div>
            <div class="line"></div>
            <div class="data-table">
                <a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource" :pagination="pagination" :loading="isLoading" @change="handleTableChange">
                    <template #action="{record}">
                        <a @click="editToolType(record)" title="编辑" style="margin-right:5px;"><img src="@/assets/images/cz-edit.png"/></a>
                        <a @click="deleteToolType(record)" title="删除"><img src="@/assets/images/cz-delete.png"/></a>
                    </template>
                </a-table>
                <a-modal v-model:visible="visible" :maskClosable="false" :afterClose="closeModal">
                    <h3 class="modal-title">{{ formState.id ? "修改导航栏" : "新增导航栏" }}</h3>
                    <div class="modal-form">
                        <a-form ref="form1" :model="formState" :rules="rules" :labelCol="{ span: 9, offset: 0 }">
                            <a-form-item label="导航栏名称" name="title">
                                <a-input v-model:value="formState.title" placeholder="请输入导航栏名称" />
                            </a-form-item>
                            <a-form-item label="URL" name="url">
                                <a-input v-model:value="formState.url" placeholder="请输入导航栏URL" />
                            </a-form-item>
                            <a-form-item label="排序序号" name="displayPriority">
                                <a-input v-model:value="formState.displayPriority" placeholder="请输入大于等于0的正整数">
                                    <template #suffix>
                                        <a-tooltip title="排序序号数值越小越靠前">
                                            <info-circle-outlined style="color: rgba(255, 0, 0, 0.7)" />
                                        </a-tooltip>
                                    </template>
                                </a-input>
                            </a-form-item>
                        </a-form>
                    </div>
                    <template #footer>
                        <div class="modal-btn">
                            <a-button type="default" shape="round" @click="closeModal()">取消</a-button>
                            <a-button :loading="btnLoading" type="primary" shape="round" @click="confirm()">确定</a-button>
                        </div>
                    </template>
                </a-modal>
            </div>
        </div> -->
    </div>
</template>
<script>
import { PlusCircleFilled, InfoCircleOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal, Button, Form, Input, Tooltip, Tag } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import avatarUpload from "@/components/avatarUpload";
export default {
    components: {
        PlusCircleFilled,
        InfoCircleOutlined,
        ATable: Table,
        AModal: Modal,
        AButton: Button,
        AForm: Form,
        AFormItem: Form.Item,
        AInput: Input,
        ATooltip: Tooltip,
        ATag: Tag,
        avatarUpload,
    },
    setup() {
        const store = useStore();
        //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
        store.dispatch("setBreadcrumb", {
            text: "网站信息 / 网站首页配置",
            isBack: false,
        });
        const formState = ref({
            id: "",
            logo: "",
            url: "",
            displayPriority: "",
        });
        const dataSource = ref([]);
        const columns = reactive([
            {
                title: "Banner图片",
                dataIndex: "logo",
                key: "logo",
                slots: { customRender: "logo" },
            },
            {
                title: "Banner位置",
                dataIndex: "display_priority",
                key: "display_priority",
            },
            {
                title: "状态",
                dataIndex: "status",
                key: "status",
                slots: { customRender: "status" },
            },
            {
                title: "操作",
                key: "action",
                slots: { customRender: "action" },
            },
        ]);
        const pagination = reactive({
            current: 1,
            pageSize: 10,
            total: 0,
        });
        return {
            dataSource,
            columns,
            pagination,
            formState,
            isLoading: ref(false),
            visible: ref(false),
            btnLoading: ref(false),
        };
    },
    data() {
        return {
            rules: {
                logo: {
                    required: true,
                    message: "不能为空",
                    trigger: "change",
                },
                url: [
                    {
                        required: true,
                        message: "不能为空",
                        trigger: "blur",
                    },
                ],
                displayPriority: [
                    {
                        required: true,
                        message: "不能为空",
                        trigger: "blur",
                    },
                    {
                        trigger: "blur",
                        message: "请输入大于等于0的整数",
                        pattern: /^(0|[1-9]\d*)$/,
                    },
                ],
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.isLoading = true;
            httpRequest
                .post("获取首页Banner列表", { page: this.pagination.current, pageSize: this.pagination.pageSize })
                .then((res) => {
                    this.dataSource = res.data.data;
                    this.pagination.total = res.data.total;
                })
                .finally(() => {
                    this.isLoading = false;
                });
        },
        handleTableChange(page) {
            this.pagination.current = page.current;
            this.getList();
        },
        deleteToolType(item) {
            Modal.confirm({
                title: "系统提示",
                content: "确认删除当前Banner？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("删除首页Banner", { id: item.id })
                            .then(() => {
                                message.success("删除Banner成功");
                                this.getList();
                            })
                            .catch(() => {
                                message.warning({ content: "Banner删除失败", key: "error" });
                            })
                            .finally(() => {
                                res();
                            });
                    });
                },
            });
        },
        editToolType(item) {
            if (this.$refs.form1 && this.$refs.form1.resetFields) {
                this.$refs.form1.resetFields();
            }
            this.formState.id = item.id;
            this.formState.logo = item.logo;
            this.formState.url = item.url;
            this.formState.displayPriority = String(item.display_priority);
            this.formState.status = item.status;
            this.visible = true;
        },
        addToolType() {
            if (this.$refs.form1 && this.$refs.form1.resetFields) {
                this.$refs.form1.resetFields();
            }
            this.formState = {
                id: "",
                logo: "",
                url: "",
                displayPriority: "",
            };
            this.visible = true;
        },
        confirm() {
            this.$refs.form1.validate().then(() => {
                this.btnLoading = true;
                const url = this.formState.id ? "编辑首页Banner" : "创建首页Banner";
                const msg = this.formState.id ? "修改成功" : "创建成功";
                httpRequest
                    .post(url, this.formState)
                    .then(() => {
                        this.visible = false;
                        this.getList();
                        message.success(msg);
                    })
                    .finally(() => {
                        this.btnLoading = false;
                    });
            });
        },
        closeModal() {
            this.visible = false;
        },
		Active(item){
			Modal.confirm({
                title: "系统提示",
                content: "是否启用当前Banner？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("启用首页Banner", { id: item.id,status:"Enabled" })
                            .then(() => {
                                message.success("启用Banner成功");
                                this.getList();
                            })
                            .catch(() => {
                            })
                            .finally(() => {
                                res();
                            });
                    });
                },
            });
		},
		Freeze(item){
			Modal.confirm({
                title: "系统提示",
                content: "是否禁用当前Banner？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("启用首页Banner", { id: item.id,status:"Disabled" })
                            .then(() => {
                                message.success("禁用Banner成功");
                                this.getList();
                            })
                            .catch(() => {
                            })
                            .finally(() => {
                                res();
                            });
                    });
                },
            });
		}
    },
};
</script>
<style lang="less" scoped>
.line {
    width: 100%;
    margin: 20px 0;
    border-top: 1px solid #eee;
}
.span-green {
    display: flex;
    align-items: center;
    &:before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        margin-right: 5px;
        background: #14ce79;
    }
}
.span-red {
    display: flex;
    align-items: center;
    color: #999;
    &:before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        margin-right: 5px;
        background: #fe4e50;
    }
}
.home-config {
    display: flex;
    justify-content: space-between;
}
</style>
